<template>
	<view class="empire-chat">
		<uni-nav-bar color="#6a6a6a" :fixed="true" :border="false" :status-bar="true" left-width="220px">
			<template #left>
				<view class="empire-mall__flex">
					<uni-icons type="back" @click="handleNvigateBack"></uni-icons>
					<view class="nav-bar__text-black">
						<text class="nav-bar__message">消息(</text>
						<text>{{ message }}</text>
						<text v-if="message > 1000" class="nav-bar__message-unit">+</text>
						<text>)</text>
					</view>
					<image :style="{ width: '24px', height: '24px' }" src="/static/images/清扫.png"></image>
				</view>
			</template>
		</uni-nav-bar>
		<uni-list>
			<uni-swipe-action>
				<uni-swipe-action-item
					:right-options="[
						{
							text: '删除',
							style: {
								backgroundColor: '#ff5000',
								color: '#fff'
							}
						}
					]"
					@change="handleSwipAction"
				>
					<uni-list-chat
						v-for="(item, key) in list"
						:key="key"
						:title="item.title"
						:note="item.note"
						:badgeText="1"
						time="星期四"
						:avatar-circle="false"
						avatar="/static/images/home/tx1.png"
						link="navigateTo"
						to="/pages/chat/chat-panel"
						@click="handleNavigateToChat"
					></uni-list-chat>
				</uni-swipe-action-item>
			</uni-swipe-action>
		</uni-list>
	</view>
</template>

<script setup>
import { ref } from 'vue';
defineProps({});

const message = ref(10004);
const list = ref([{ title: '格林尼治官方旗舰店', note: '这个一个内容示例，聊天内容xxxxxxxx' }]);
function handleNvigateBack() {
	uni.switchTab({
		url: '/pages/mine/mine'
	});
}
function handleSwipAction(action) {
	if (action === 'right') {
		//删除聊天记录
	}
}
function handleNavigateToChat(chat) {}
</script>

<style scoped lang="scss">
.nav-bar__text-black {
	display: flex;
	align-items: center;
	height: 44px;
	line-height: 44px;
	margin-right: 12rpx;
}
.nav-bar__message {
	font-size: 32rpx;
}
.nav-bar__message-unit {
	height: 44px;
	line-height: 40px;
}
</style>
